<template>
  <CommonCard title="累计用户数" :value="768923">
    <template #default>
      <v-chart :option="option"></v-chart>
    </template>
    <template #footer>
      <div class="wrapper">
        <div>
          <span>日同比</span>
          <span class="css-1">12.35%</span>
          <span
            :class="{
              increase: reportData.salesGrowLastDay > 0,
              decrease: reportData.salesGrowLastDay < 0,
            }"></span>
        </div>
        <div>
          <span>月同比</span>
          <span class="css-1">23.97%</span>
          <span
            :class="{
              increase: reportData.saleSGrowLastMonth > 0,
              decrease: reportData.saleSGrowLastMonth < 0,
            }"></span>
        </div>
      </div>
    </template>
  </CommonCard>
</template>

<script setup>
import { ref, watch } from 'vue'
import CommonCard from './CommonCard.vue'

const props = defineProps({
  reportData: {
    type: Object,
    required: true,
  },
})

const option = ref({})

const renderChart = (V1, V2) => {
  option.value = {
    xAxis: {
      type: 'value',
      show: false,
    },
    yAxis: {
      type: 'category',
      show: false,
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: 'bar',
        data: [V1],
        itemStyle: { color: 'green' },
        barWidth: 20,
        stack: 'total',
        // animation: false,
      },
      {
        type: 'bar',
        data: [V2],
        itemStyle: { color: '#eee' },
        barWidth: 20,
        stack: 'total',
        // animation: false,
      },
      {
        // 自定义形状
        type: 'custom',
        data: [V1],
        /**
         *
         * @param params 当前数据项的信息（如索引、数据等）。
         * @param api ECharts 提供的工具方法（如 api.value、api.coord、api.style），帮助获取数据和坐标。
         */
        renderItem: function (params, api) {
          const [x, y] = api.coord([api.value(0), api.value(1)])
          const size = 12 // 三角形大小
          const offset = 25 // 偏移量
          return {
            type: 'group',
            children: [
              {
                type: 'polygon',
                shape: {
                  points: [
                    [x, y - size + offset], // 顶点
                    [x - size / 2, y + size / 2 + offset], // 左下
                    [x + size / 2, y + size / 2 + offset], // 右下
                  ],
                },
                style: {
                  fill: 'green',
                },
              },
              {
                type: 'polygon',
                shape: {
                  points: [
                    [x, y + size - offset], // 顶点
                    [x + size / 2, y - size / 2 - offset], // 左下
                    [x - size / 2, y - size / 2 - offset], // 右下
                  ],
                },
                style: {
                  fill: 'green',
                },
              },
            ],
          }
        },
      },
    ],
  }
}

watch(props, () => {
  renderChart(props.reportData.userLastMonth, props.reportData.userToday)
})
</script>

<style scoped>
.wrapper {
  display: flex;
  gap: 50px;
}
</style>
